<template>
  <div class="container">
    <!-- 轮播图 Start -->
    <div class="swiper-view">
      <van-swipe class="swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in swiperList" :key="index">
          <van-image
            class="swiper-image"
            style="width: 100%; height: 100%"
            :src="item.image"
            fit="cover"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图 End -->
    <slot-dom-block class="block">
      <template #bg>
        <img src="@/assets/images/ziliaobg.png" alt="" />
      </template>
      <div class="number-block-content">
        <div class="number-item">
          <div class="number-item-label">WONE總發行量</div>
          <div class="number-item-value">{{ wone }}</div>
        </div>
        <div class="number-item">
          <div class="number-item-label">WONE市場流通</div>
          <div class="number-item-value">{{ circulate }}</div>
        </div>
        <div class="number-item">
          <div class="number-item-label">WONE累計銷毀量</div>
          <div class="number-item-value">{{ devastate }}</div>
        </div>
      </div>
    </slot-dom-block>
    <slot-dom-block class="block">
      <template #bg>
        <img src="@/assets/images/BXimg.png" alt="" />
      </template>
      <div class="region-view">
        <div class="title">5倍區</div>
        <div class="text">最低100U起購</div>
      </div>
    </slot-dom-block>
    <slot-dom-block class="block">
      <template #bg>
        <img src="@/assets/images/moinsu.png" alt="" />
      </template>
      <div class="drop-view">
        <div class="drop-item">
          <div class="drop-item-title">大節點5000U</div>
          <div class="drop-item-box">
            <div class="text">全網分紅1%</div>
            <div class="text">賦予W3權益</div>
            <div class="text">配送價值500U的WONE</div>
          </div>
        </div>
        <div class="drop-item">
          <div class="drop-item-title">小節點2000U</div>
          <div class="drop-item-box">
            <div class="text">全網分紅1%</div>
            <div class="text">賦予W3權益</div>
            <div class="text">配送價值200U的WONE</div>
          </div>
        </div>
      </div>
    </slot-dom-block>
    <div class="chart-card">
      <div class="tab-view">
        <div
          class="tab-item"
          @click="hendleTab(0)"
          :class="{ active: tabIndex == 0 }"
        >
          WONE
        </div>
        <div
          class="tab-item"
          @click="hendleTab(1)"
          :class="{ active: tabIndex == 1 }"
        >
          WOO
        </div>
      </div>
      <div class="chart-view">
        <chart-card
          v-if="tabIndex === 0"
          class="block"
          :k-line-data="kLineDataWone"
        />
        <chart-card
          v-if="tabIndex === 1"
          class="block"
          :k-line-data="kLineDataWoo"
        />
      </div>
    </div>
    <share-popup ref="share" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import slotDomBlock from "@/components/slot-dom/block";
import chartCard from "./module/chart";
import sharePopup from "./module/share-popup";
import { homeData, woo_k } from "@/request/api/index";
import dayjs from "dayjs";
export default {
  computed: {
    ...mapState({
      // walletAddress: (state) => state.user.walletAddress,
      // token: (state) => state.user.token,
    }),
  },
  components: { slotDomBlock, chartCard, sharePopup },
  data() {
    return {
      wone: "",
      circulate: "",
      devastate: "",
      swiperList: [],
      kLineDataWone: [],
      kLineDataWoo: [],
      tabIndex: 0,
    };
  },
  mounted() {
    // this.$refs.share.open();
    this.getData();
    this.get_woo_k();
  },
  methods: {
    /**
     * k线切换
     * @param {*} index
     */
    hendleTab(index) {
      this.tabIndex = index;
    },
    /**
     * 获取页面数据
     */
    getData() {
      homeData().then((res) => {
        const { code, data, msg } = res;
        if (code == 1) {
          this.wone = data.wone;
          this.circulate = data.circulate;
          this.devastate = data.devastate;
          this.swiperList = data.banner.map((item) => {
            const { en_image, id, image, url } = item;
            return {
              en_image: process.env.VUE_APP_URL + en_image,
              id,
              image: process.env.VUE_APP_URL + image,
              url,
            };
          });

          this.kLineDataWone = data.wone_k
            .map((item) => {
              return {
                // 时间戳，毫秒级别，必要字段
                timestamp: dayjs(item.date).valueOf(),
                // 开盘价，必要字段
                open: item.bgin_usdt,
                // 收盘价，必要字段
                close: item.usdt,
                // 最高价，必要字段
                high: item.max_usdt,
                // 最低价，必要字段
                low: item.lowest_usdt,
                // 成交量，非必须字段
                // volume: number,
                // 成交额，非必须字段，如果需要展示技术指标'EMV'和'AVP'，则需要为该字段填充数据。
                // turnover: number,
              };
            })
            .reverse();
        } else {
          this.$toast.fail(msg);
        }
      });
    },
    /**
     * 获取wook线
     */
    get_woo_k() {
      woo_k().then((res) => {
        const { code, data, msg } = res;
        if (code == 1) {
          this.kLineDataWoo = data.t.map((item, index) => {
            return {
              // 时间戳，毫秒级别，必要字段
              timestamp: item * 1000,
              // 开盘价，必要字段
              open: data.o[index],
              // 收盘价，必要字段
              close: data.c[index],
              // 最高价，必要字段
              high: data.h[index],
              // 最低价，必要字段
              low: data.l[index],
              // 成交量，非必须字段
              volume: data.v[index],
              // 成交额，非必须字段，如果需要展示技术指标'EMV'和'AVP'，则需要为该字段填充数据。
              // turnover: number,
            };
          });
        } else {
          this.$toast.fail(msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
